<!-- 公告 -->
<template>
    <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标题">
                <el-input v-model="formInline.noticeTitle" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formInline.popup" placeholder="请输入商品名称">
                    <el-option v-for="item in isPopupType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否展示">
                <el-select v-model="formInline.recommend" placeholder="请输入商品名称">
                    <el-option label="是" value="true" />
                    <el-option label="否" value="false" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="margin-top: 24px;">
        <el-descriptions title="弹窗列表">
            <template #extra>
                <el-button @click="addNotice" type="primary">添加</el-button>
            </template>
        </el-descriptions>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column prop="noticeTitle" label="标题"></el-table-column>
            <el-table-column prop="name" label="类型">
                <template #default="{ row }">{{ row.isPopup ? '弹窗' : '公告' }}</template>
            </el-table-column>
            <el-table-column prop="address" label="弹窗图片">
                <template #default="{ row }">
                    <span v-if="!row.isPopup">-</span>
                    <div v-else style="display: flex; align-items: center;">
                        <el-image style="width: 60px; height: 60px;" :src="row.popupImage"
                            :preview-src-list="[row.popupImage]" :preview-teleported="true">
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="是否展示">
                <template #default="{ row }">
                    <el-switch @change="switchChange(row.noticeId, $event)" v-model="row.isRecommend" />
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="address" label="操作">
                <template #default="{ row }">
                    <el-button @click="edit(row.noticeId)" type="primary" link>编辑</el-button>
                    <el-button @click="del(row.noticeId)" v-if="!row.recommend" type="danger" link>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
        :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="添加" width="30%" :before-close="handleClose">
        <el-form label-position="right" :rules="rules" ref="formRef" label-width="100px" :model="formLabelAlign">
            <el-form-item label="标题" prop="noticeTitle">
                <el-input v-model="formLabelAlign.noticeTitle" placeholder="请输入玩法/活动名称" />
            </el-form-item>
            <el-form-item label="类型" prop="isPopup">
                <el-radio-group v-model="formLabelAlign.isPopup" class="ml-4">
                    <el-radio :label="true" size="large">弹窗</el-radio>
                    <el-radio :label="false" size="large">公告</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="popup" v-if="formLabelAlign.isPopup">
                <el-form-item label="弹窗图片" prop="popupImage">
                    <el-upload class="avatar-uploader" action=" " :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="formLabelAlign.popupImage" :src="formLabelAlign.popupImage" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="添加链接">
                    <el-button type="primary" @click="addLink">添加链接</el-button>
                </el-form-item>
                <el-form-item label="是否首页" prop="belongFlag">
                    <el-radio-group v-model="formLabelAlign.belongFlag" class="ml-4">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="notice" v-else>
                <el-form-item label="标题内容" prop="noticeContent">
                    <el-input v-model="formLabelAlign.noticeContent" maxlength="120" placeholder="请输入玩法/活动名称"
                        show-word-limit type="text" />
                </el-form-item>
            </div>
            <el-form-item label="是否展示" prop="recommend">
                <el-switch v-model="formLabelAlign.isRecommend" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="validateFn(formRef, save)">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
    <OptionLink ref="linkref" v-model:LinkShow="LinkShow"></OptionLink>
</template>
<script setup>
import { defineComponent, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetNoticeListApi, AddNoticel, DelNoticel, changeQNoticel, EchoQNoticel, EditQNoticel } from '@/api/notice'
import { uploadImageFn, validateFn } from '@/utils'
import OptionLink from './components/link.vue'

defineComponent({
    components: {
        OptionLink
    }
})

//表单校验
const formRef = ref()
const rules = reactive({
    noticeTitle: [{ required: true, message: '请输入标题', trigger: 'change' }],
    isPopup: [{ required: true, message: '请选择类型', trigger: 'change' }],
    popupImage: [{ required: true, message: '请上传banner', trigger: 'change' }],
    belongFlag: [{ required: true, message: '请选择是否首页', trigger: 'change' }],
    noticeContent: [{ required: true, message: '请输入标题内容', trigger: 'change' }],
})

const isPopupType = [
    {
        value: true,
        label: '弹窗',
    },
    {
        value: false,
        label: '公告',
    }
]
const formInline = ref({
    noticeTitle: null,
    popup: null,
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([])
const NoticeFrom = ref({
    noticeTitle: null,
    noticeContent: null,
    belongFlag: 1,
    popup: true,
    popupImage: null,
    linkUrl: null,
    recommend: 0
})
const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
    noticeTitle: null,
    noticeContent: null,
    belongFlag: 1,
    isPopup: true,
    popupImage: null,
    linkUrl: '',
    isRecommend: 0,
    urlId: null
})
const LinkShow = ref(false)


//获取列表
async function GetNoticeList(data) {
    const res = await GetNoticeListApi(data)
    total.value = res.data.totalSize
    tableData.value = res.data.content
}

GetNoticeList(formInline.value)

//添加公告
function addNotice() {
    AddDialog.value = true
}

//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value = {
        noticeTitle: null,
        noticeContent: null,
        belongFlag: 1,
        isPopup: true,
        popupImage: null,
        linkUrl: '',
        isRecommend: 0,
        urlId: null
    }
    formRef.value.resetFields()
    GetNoticeList(formInline.value)


}

//获取选中盲盒
const linkref = ref(null)

//保存
async function save() {
    console.log(formLabelAlign.value);
    formLabelAlign.value.type = linkref.value.type
    formLabelAlign.value.urlId = linkref.value.Pickid

    if (!formLabelAlign.value.noticeId) {
        await AddNoticel({
            ...formLabelAlign.value,
            type: linkref.value.type

        })
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    } else {
        await EditQNoticel({
            ...formLabelAlign.value,
            type: linkref.value.type

        })
        ElMessage({
            message: '编辑成功',
            type: 'success',
        })
    }
    handleClose()
    GetNoticeList(formInline.value)
}

//pageSize改变时
function handleSizeChange(params) {
    formInline.value.pageSize = params
    GetNoticeList(formInline.value)
}

//页码改变时
function handleCurrentChange(params) {
    formInline.value.pageNum = params
    GetNoticeList(formInline.value)

}

//查询
function onSubmit() {
    console.log(formInline);
    GetNoticeList(formInline.value)
}

//重置
function onReset() {
    formInline.value = {
        noticeTitle: null,
        popup: null,
        pageNum: 1,
        pageSize: 10
    }
    GetNoticeList(formInline.value)

}

//table表格选中
function handleSelectionChange(params) {

}

//上传图片
async function beforeAvatarUpload(file) {
    const res = await uploadImageFn(file)
    formLabelAlign.value.popupImage = res
}

//关闭链接弹窗
function ClooseLink(params) {
    LinkShow.value = false
}

//添加链接
function addLink() {
    LinkShow.value = true
}

//删除按钮
async function del(params) {
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await DelNoticel(params)
        GetNoticeList(formInline.value)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//开关按钮
async function switchChange(navigationId, params) {
    await changeQNoticel(navigationId, params)
    GetNoticeList(formInline.value)
    ElMessage({
        message: '修改状态成功',
        type: 'success',
    })
}

//编辑
async function edit(id) {
    const res = await EchoQNoticel(id)
    formLabelAlign.value = res.data
    console.log(formLabelAlign.value.popup);
    AddDialog.value = true
}
</script>

<style scoped lang="sass">

</style>